<template>
  <div class="main">
    <div class="content">
      <h4 class="active">
        正在进行
        <span class="statistics">{{ unconpletedNum }}</span>
        <div class="item" v-for="item in uncompletedTodos" :key="item.id">
          <label for="">
            <input
              type="checkbox"
              :checked="item.completed"
              @click="handelCompleted(item)"
            />
            {{ item.content }}
          </label>
          <button @click="handelDel(item.id)">删除</button>
        </div>
      </h4>
      <h4 class="done">
        已经完成
        <span class="statistics">{{ conpletedNum }}</span>
        <div class="item" v-for="item in completedTodos" :key="item.id">
          <label for="">
            <input
              type="checkbox"
              :checked="item.completed"
              @click="handelCompleted(item)"
            />
            {{ item.content }}
          </label>
          <button @click="handelDel">删除</button>
        </div>
      </h4>
    </div>
  </div>
</template>
<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
  todo: {
    type: Array,
    required: true,
  },
})
const completedTodos = computed(() =>
  props.todo.filter((todo) => todo.completed)
)
const uncompletedTodos = computed(() =>
  props.todo.filter((todo) => !todo.completed)
)
const conpletedNum = computed(
  () => props.todo.filter((todo) => todo.completed).length
)
const unconpletedNum = computed(
  () => props.todo.filter((todo) => !todo.completed).length
)
function handelDel(id) {
  const result = window.confirm('确认删除吗')
  if (result) {
    //用一种方法实现
    const index = props.todo.findIndex((item) => item.id == id)
    props.todo.splice(index, 1)
    localStorage.setItem('todo', JSON.stringify(props.todo))
  }
}
function handelCompleted(item) {
  item.completed = !item.completed
  console.log(item.completed)
  localStorage.setItem('todo', JSON.stringify(props.todo))
}
</script>
<style scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
}
.content {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #fff;
}
.active .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 15px;
  padding: 5px 10px;
  border: 1px solid #eeeeee;
}


.done .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 15px;
  padding: 5px 10px;
  border: 1px solid #eeeeee;
}
</style>
